<template>
  <div
    class="theme-container"
    :class="pageClasses"
    @touchstart="onTouchStart"
    @touchend="onTouchEnd"
  >
    <Navbar
      v-if="shouldShowNavbar"
      @toggle-sidebar="toggleSidebar"
      ref="nav"
    />

    <div
      class="sidebar-mask"
      @click="toggleSidebar(false)"
    />

    <Sidebar
      :items="sidebarItems"
      @toggle-sidebar="toggleSidebar"
    >
      <template #top>
        <slot name="sidebar-top"/>
      </template>
      <template #bottom>
        <slot name="sidebar-bottom"/>
      </template>
    </Sidebar>

    <Home v-if="$page.frontmatter.home"/>

    <Page
      v-else
      :sidebar-items="sidebarItems"
    >


      <!-- <template #top> -->
        <!-- <div class='float_box_discover'> -->
          <!-- 这里是一个测试，看看效果怎么样？ -->
        <!-- </div> -->
      <!-- </template> -->


      <template #bottom>

        <!-- ArkUI底部广告 -->
        <div style="text-align: center">
          <img src="./pay.jpeg" width="200" height="200">
          <div> 请作者喝杯咖啡 </div>
        </div>


        <div class='copyright'> &copy;arkui.club版权所有，禁止私自转发、克隆网站。</div>

        <div class='qq-link'>
          <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=YBDKMU9Lt309QL_I1Lfa2jVpGwx65VSR&jump_from=webapi" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
            <img src="./qqgroup.png" width="85px" height="20px" style="float:left;"/>
            <p style="float:right;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">欢迎加入鸿蒙技术交流群：695438501</p>
          </a>
        </div>

        <div align="center" style="margin:0 auto; padding:5px 0;">
          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12011402001367" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
            <img src="./police.png" width="20px" height="20px" style="float:left;"/>
            <p style="float:right;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">津公网安备 12011402001367号</p>
          </a>

          <a target="_blank" href="https://beian.miit.gov.cn" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
            <p style="float:right;height:20px;line-height:20px;margin: 0px 0px 5px 5px; color:#939393;">津ICP备2020008934号-2</p>
          </a>
        </div>

        <div align="center" style="margin:0 auto; padding:5px 0;">

          <a target="_blank" href="https://www.12377.cn/" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
            <p style="float:right;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">中央网信办互联网违法和不良信息举报中心</p>
          </a>

          <a target="_blank" href="https://www.qinglangtianjin.com/" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
            <p style="float:right;height:20px;line-height:20px;margin: 0px 0px 5px 5px; color:#939393;">天津市互联网违法和不良信息举报中心</p>
          </a>
        </div>

      </template>
    </Page>
  </div>
</template>

<script>
  import Home from '@theme/components/Home.vue'
  import Navbar from '@theme/components/Navbar.vue'
  import Page from '@theme/components/Page.vue'
  import Sidebar from '@theme/components/Sidebar.vue'
  import {resolveSidebarItems} from '@vuepress/theme-default/util'
  

  var _hmt;
  function initBaiduSDK() {
    _hmt = _hmt || [];
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?95792d2d78e5f085da634f88f5250894";
    var s = document.getElementsByTagName("script")[0];
    hm.id = "bd"
    s.parentNode.insertBefore(hm, s);
  }

  export default {
    name: 'Layout',
    components: {
      Home,
      Page,
      Sidebar,
      Navbar
    },
    data() {
      return {
        isSidebarOpen: false,
        showBook: false,
      }
    },
    computed: {
      shouldShowNavbar() {
        const {themeConfig} = this.$site
        const {frontmatter} = this.$page
        if (
          frontmatter.navbar === false
          || themeConfig.navbar === false) {
          return false
        }
        return (
          this.$title
          || themeConfig.logo
          || themeConfig.repo
          || themeConfig.nav
          || this.$themeLocaleConfig.nav
        )
      },
      shouldShowSidebar() {
        const {frontmatter} = this.$page
        return (
          !frontmatter.home
          && frontmatter.sidebar !== false
          && this.sidebarItems.length
        )
      },
      sidebarItems() {
        return resolveSidebarItems(
          this.$page,
          this.$page.regularPath,
          this.$site,
          this.$localePath
        )
      },
      pageClasses() {
        const userPageClass = this.$page.frontmatter.pageClass
        return [
          {
            'no-navbar': !this.shouldShowNavbar,
            'sidebar-open': this.isSidebarOpen,
            'no-sidebar': !this.shouldShowSidebar
          },
          userPageClass
        ]
      }
    },
    mounted() {
      initBaiduSDK();
      this.lastPathname = ''
      this.$router.afterEach(() => {
        if (this.lastPathname !== location.pathname) {
          //百度统计
          this.lastPathname = location.pathname;
          if(this.lastPathname.startsWith("/") || this.lastPathname.includes("localhost")) {
            console.log(location.pathname);
          } else {
            _hmt.push(['_trackPageview', this.lastPathname]);
          }

          // 
        }
        this.isSidebarOpen = false
      })
      const {themeConfig} = this.$site
      let logo = themeConfig.logo;
      let checkIfShowLogo = () => {
        if (window.innerWidth < 720 && themeConfig.log !== "") {
          themeConfig.logo = ""
          this.$refs.nav?.$forceUpdate()
        } else if (window.innerWidth >= 720 && themeConfig.logo === "") {
          themeConfig.logo = logo
          this.$refs.nav?.$forceUpdate()
        }
      }
      checkIfShowLogo()
      window.addEventListener('resize', checkIfShowLogo)
    },
    methods: {
      toggleSidebar(to) {
        this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
        this.$emit('toggle-sidebar', this.isSidebarOpen)
      },
      // side swipe
      onTouchStart(e) {
        this.touchStart = {
          x: e.changedTouches[0].clientX,
          y: e.changedTouches[0].clientY
        }
      },
      onTouchEnd(e) {
        const dx = e.changedTouches[0].clientX - this.touchStart.x
        const dy = e.changedTouches[0].clientY - this.touchStart.y
        if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
          if (dx > 0 && this.touchStart.x <= 80) {
            this.toggleSidebar(true)
          } else {
            this.toggleSidebar(false)
          }
        }
      }
    }
  }
</script>

<style>
  .copyright {
    text-align: center;
    margin: 50px 16px 8px 16px;
    color: grey;
    font-size: .9em;
  }
  .qq-link {
    text-align: center;
    margin: 5px 16px 8px 16px;
    color: grey;
    font-size: .9em;
  }
  .f-links a {
    font-weight: normal;
    text-decoration: underline;
    font-size: .9em;
    color: dodgerblue !important;
  }
  .f-links a:hover {
    opacity: .8 !important;
  }
  .book {
    transition: 200ms box-shadow;
    max-width: 180px;
    box-shadow: 2px 2px 5px #aaa;
    cursor: pointer;
  }
  .book:hover {
    box-shadow: 5px 5px 8px #888;
  }
  .float_box_discover {
    background-color: #ffffff;
    width: 150px;
    height: 400px;
    text-align: center;
    position: fixed;
    top: 150px;
    right: 10px;
  }
</style>